<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello vue</title>
    <script src="https://unpkg.com/vue@latest"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //建议优先使用computed，后用method和watcher
    const app = Vue.createApp({
        data() {
            return {
                message: 'hello world',
                count: 2,
                price: 5,
            }
        },
        methods: {
            formatString(string) { //模版的{{}}中可以使用这里定义的函数
                return string.toUpperCase();
            },
            onClick() {
                this.price *= 2;
            },
            getTotal() { //被{{}}调用的Method，只要页面重新渲染，就会重新调用和计算
                return this.count * this.price;
            }
        },
        watch: {
            price(prev,current) { //当watch发生改变时被调用
                console.log("price changed from"+prev+"to"+current);
            }
        },
        computed: {
            total() { //可供下面调用，且里面的data数据发生变化时会重新计算
                setTimeout(()=>{console.log("count or price changed")},2000);
                return this.count * this.price;
            }
        },
        mounted() {
            console.log("mounted");
            console.log(this); //this就指向下面的vm，在事件的method中使用this也是如此
        },
        template:
        `
        <div>{{formatString(message)}}</div>
        <div>{{count * price}}</div>
        <div @click="onClick">{{total}}</div>
        <div>{{getTotal()}}</div>
        `
    });
    //vm代表这个app的根组件
    vm = app.mount("#root");
    console.log(vm);
    console.log(vm.$data.message == vm.message); //可以直接通过.访问vm中的data
</script>
</html>